<template>
  <div>
    <i-page-header class="product_tabs" title="角色管理"></i-page-header>
    <Card :bordered="false" dis-hover class="ivu-mt">
      <Form
        ref="formValidate"
        :model="formValidate"
        :label-width="labelWidth"
        :label-position="labelPosition"
        @submit.native.prevent
      >
        <Row type="flex" :gutter="24">
          <Col v-bind="grid">
            <FormItem label="搜索：" label-for="status2">
              <Input
                search
                enter-button
                placeholder="请输入姓名或者账号"
                v-model="formValidate.keyword"
                @on-search="userSearchs"
              />
            </FormItem>
          </Col>
        </Row>
        <Row type="flex">
          <Col v-bind="grid">
            <el-button
              type="primary"
              @click="tapAdd"
              v-if="$utils.checkPermissions(paths, 'role/save')"
              icon="md-add"
              >添加身份</el-button
            >

            <el-button
              type="danger"
              @click="tapPermissions"
              v-if="$utils.checkPermissions(paths, 'rolePath/list')"
              >权限配置表</el-button
            >
          </Col>
        </Row>
      </Form>

      <Table
        :columns="columns1"
        :data="tableData"
        class="mt25"
        no-userFrom-text="暂无数据"
        no-filtered-userFrom-text="暂无筛选结果"
        :loading="loading"
        highlight-row
      >
        <template slot-scope="{ row }" slot="status">
          <el-tag v-if="row.status == 1">开启</el-tag>
          <el-tag type="info" v-else>关闭</el-tag>
        </template>
        <template slot-scope="{ row, index }" slot="action">
          <div v-if="row.is_system == 1">
            <i-link
              v-if="$utils.checkPermissions(paths, 'admin/list')"
              :to="
                '/system/admin/index?roleId=' +
                row.id +
                '&title=' +
                row.name +
                '会员'
              "
              >查看会员</i-link
            >
            <Divider
              v-if="$utils.checkPermissions(paths, 'admin/list')"
              type="vertical"
            />
            <a
              v-if="$utils.checkPermissions(paths, 'role/setingList')"
              style="color: #c5c8ce"
              >编辑权限</a
            >
            <Divider
              v-if="$utils.checkPermissions(paths, 'role/setingList')"
              type="vertical"
            />
            <a
              v-if="$utils.checkPermissions(paths, 'role/save')"
              style="color: #c5c8ce"
              >编辑</a
            >
            <Divider
              v-if="$utils.checkPermissions(paths, 'role/save')"
              type="vertical"
            />
            <a
              v-if="$utils.checkPermissions(paths, 'role/del')"
              style="color: #c5c8ce"
              >删除</a
            >
          </div>

          <div v-else>
            <i-link
              v-if="$utils.checkPermissions(paths, 'admin/list')"
              :to="
                '/system/admin/index?roleId=' +
                row.id +
                '&title=' +
                row.name +
                '会员'
              "
              >查看会员</i-link
            >
            <Divider
              v-if="$utils.checkPermissions(paths, 'admin/list')"
              type="vertical"
            />
            <a
              v-if="$utils.checkPermissions(paths, 'role/setingList')"
              @click="tapRoleSeting(row.id)"
              >编辑权限</a
            >
            <Divider
              v-if="$utils.checkPermissions(paths, 'role/setingList')"
              type="vertical"
            />
            <a
              v-if="$utils.checkPermissions(paths, 'role/save')"
              @click="tapEdit(index)"
              >编辑</a
            >
            <Divider
              v-if="$utils.checkPermissions(paths, 'role/save')"
              type="vertical"
            />
            <a
              v-if="$utils.checkPermissions(paths, 'role/del')"
              @click="tapDel(row.id)"
              >删除</a
            >
          </div>
        </template>

        <template slot-scope="{ row,  }" slot="avatar">
          <el-avatar icon="el-icon-user-solid" :src="row.avatar"></el-avatar>
        </template>
      </Table>
    </Card>

    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="40%"
      :before-close="editClose"
    >
      <el-form ref="role" :model="role" label-width="80px">
        <el-form-item
          label="角色名"
          prop="name"
          :rules="[{ required: true, message: '请输入角色名' }]"
        >
          <el-input
            placeholder="请输入角色名"
            autocomplete="off"
            v-model="role.name"
          ></el-input>
        </el-form-item>

        <el-form-item label="是否禁用" style="margin-bottom: 0">
          <el-radio-group v-model="role.status">
            <el-radio :label="1">正常</el-radio>
            <el-radio :label="0">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="subAdmin">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import IPageHeader from '../../../../layouts/system/page-header/index'
import {
  SystemRole,
  SystemRoleSave,
  SystemRoleDel,
} from '../../../../api/system/role'
import { mapState, mapActions } from 'vuex'
import UiUpload from '../../../../ui/upload/index'
export default {
  name: 'index',
  components: { UiUpload, IPageHeader },
  computed: {
    ...mapState('system/layout', ['isMobile']),
    ...mapState('system/user', ['paths']),
    labelWidth() {
      return this.isMobile ? undefined : 50
    },
    labelPosition() {
      return this.isMobile ? 'top' : 'left'
    },
  },
  data() {
    return {
      title: '添加角色',
      dialogVisible: false,
      upUrl: '',
      upHeaders: {},
      grid: {
        xl: 7,
        lg: 7,
        md: 12,
        sm: 24,
        xs: 24,
      },
      columns1: [
        {
          title: 'ID',
          key: 'id',
          minWidth: 120,
        },
        {
          title: '角色名',
          key: 'name',
          minWidth: 150,
        },
        {
          title: '启动',
          slot: 'status',
          minWidth: 150,
        },
        {
          title: '操作',
          key: 'action',
          slot: 'action',
          fixed: 'right',
          minWidth: 120,
        },
      ],
      loading: true,
      tableData: [],
      tableData2: [],
      formValidate: {
        keyword: '',
      },
      role: {
        name: '',
        username: '',
        status: 1,
        role_id: '',
        password: '',
        avatar: '',
      },
    }
  },

  created() {},
  mounted() {
    this.getData()
  },
  methods: {
    /**
     * 获取数据
     */
    getData: function () {
      var data = {
        keyword: this.formValidate.keyword,
      }
      SystemRole(data)
        .then((res) => {
          this.loading = false
          if (res.code == 200) {
            this.tableData = res.data
            this.tableData2 = JSON.parse(JSON.stringify(res.data))
          } else {
            this.$alert(res.msg)
          }
        })
        .catch((err) => {
          this.loading = false
          this.$utils.loadingClose()
          this.$alert('网络繁忙，加载失败，请稍等片刻在尝试!', '系统提示')
        })
    },
    userSearchs() {
      var data = []
      for (var i in this.tableData2) {
        if (this.tableData2[i].name.indexOf(this.formValidate.keyword) >= 0) {
          data.push(this.tableData2[i])
        }
      }

      this.tableData = data
    },
    /**
     * 分页
     */
    tapPage: function (index) {
      this.page.page = index
      this.getData()
    },
    /**
     * 添加新管理人员
     */
    tapAdd: function () {
      this.dialogVisible = true
      this.$refs['role'].resetFields()
    },
    /**
     * 权限配置
     */
    tapPermissions: function () {
      this.$router.push('/system/role/permissions')
    },
    /**
     * 角色设置
     */
    tapRoleSeting: function (id) {
      this.$router.push('/system/role/seting?id=' + id)
    },
    //修改内容
    editClose: function () {
      this.dialogVisible = false
    },
    /**
     * 提交参数
     */
    subAdmin: function () {
      this.$refs['role'].validate((valid) => {
        if (valid) {
          this.$utils.loading(this, '提交数据中...')
          SystemRoleSave(this.role)
            .then((res) => {
              this.$utils.loadingClose()
              if (res.code == 200) {
                this.$message({
                  message: res.msg,
                  type: 'success',
                })
                this.getData()
                this.dialogVisible = false
              } else {
                this.$alert(res.msg)
              }
            })
            .catch((err) => {
              this.$utils.loadingClose()
              this.$alert('网络繁忙，加载失败，请稍等片刻在尝试!', '系统提示')
            })
        }
      })
    },

    /**
     * 删除管理账号
     */
    tapDel: function (id) {
      this.$confirm('此操作将永久删除该管理员, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        this.$utils.loading(this, '删除数据中...')
        SystemRoleDel({ id: id })
          .then((res) => {
            this.$utils.loadingClose()
            this.loading = true
            if (res.code == 200) {
              this.getData()
            } else {
              this.$alert(res.msg)
            }
          })
          .catch((err) => {
            this.$utils.loadingClose()
            this.$alert('网络繁忙，加载失败，请稍等片刻在尝试!', '系统提示')
          })
      })
    },

    /**
     * 修改管理员
     */
    tapEdit: function (index) {
      this.role = this.tableData[index]
      this.dialogVisible = true
      this.title = '修改角色'
    },
  },
}
</script>
<style scoped></style>
